<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="240">
			<!-- 申请人信息 -->
			<view class="section-title">申请人信息</view>

			<u-form-item label="申请人姓名" prop="applicant_name" required>
				<u-input v-model="form.applicant_name" placeholder="请输入申请人姓名" />
			</u-form-item>

			<u-form-item label="申请人性别" prop="applicant_gender" required>
				<u-radio-group v-model="form.applicant_gender">
					<u-radio name="男">男</u-radio>
					<u-radio name="女">女</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="申请人出生日期" prop="applicant_birth_date" required>
				<u-input
					v-model="form.applicant_birth_date"
					placeholder="请选择出生日期"
					readonly
					@click="showApplicantBirthCalendar = true"
				/>
			</u-form-item>

			<!-- 迁移人信息 -->
			<view class="section-title">迁移人信息</view>

			<u-form-item label="迁移人姓名" prop="move_person_name" required>
				<u-input v-model="form.move_person_name" placeholder="请输入迁移人姓名" />
			</u-form-item>

			<u-form-item label="迁移人性别" prop="move_person_gender" required>
				<u-radio-group v-model="form.move_person_gender">
					<u-radio name="男">男</u-radio>
					<u-radio name="女">女</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="迁移人出生日期" prop="move_person_birth_date" required>
				<u-input
					v-model="form.move_person_birth_date"
					placeholder="请选择出生日期"
					readonly
					@click="showMovePersonBirthCalendar = true"
				/>
			</u-form-item>

			<u-form-item label="迁移人身份证号码" prop="move_person_id_card" required>
				<u-input v-model="form.move_person_id_card" placeholder="请输入18位身份证号码" />
			</u-form-item>

			<u-form-item label="迁移人联系电话" prop="move_person_phone" required>
				<u-input v-model="form.move_person_phone" placeholder="请输入联系电话" />
			</u-form-item>

			<!-- 地址信息 -->
			<view class="section-title">地址信息</view>

			<u-form-item label="迁出地址" prop="move_out_address" required>
				<u-input type="textarea" v-model="form.move_out_address" placeholder="请输入迁出地址" />
			</u-form-item>

			<u-form-item label="迁入地址" prop="move_in_address" required>
				<u-input type="textarea" v-model="form.move_in_address" placeholder="请输入迁入地址" />
			</u-form-item>

			<u-form-item label="迁入地" prop="move_in_location" required>
				<u-input v-model="form.move_in_location" placeholder="请输入迁入地" />
			</u-form-item>

			<!-- 关系和原因 -->
			<view class="section-title">关系和原因</view>

			<u-form-item label="与申请人关系" prop="relationship" required>
				<u-input v-model="form.relationship" placeholder="请输入与申请人关系" />
			</u-form-item>

			<u-form-item label="迁移原因" prop="move_reason" required>
				<u-input type="textarea" v-model="form.move_reason" placeholder="请详细说明迁移原因" />
			</u-form-item>
		</u-form>

		<!-- 申请人出生日期日历 -->
		<u-calendar
			v-model="showApplicantBirthCalendar"
			mode="date"
			@change="onApplicantBirthDateChange"
		></u-calendar>

		<!-- 迁移人出生日期日历 -->
		<u-calendar
			v-model="showMovePersonBirthCalendar"
			mode="date"
			@change="onMovePersonBirthDateChange"
		></u-calendar>

		<!-- 底部固定提交按钮 -->
		<view class="submit-section">
			<u-button type="primary" @click="submitForm" :loading="submitting">提交申请</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				applicant_name: '',
				applicant_gender: '',
				applicant_birth_date: '',
				move_person_name: '',
				move_person_gender: '',
				move_person_birth_date: '',
				move_person_id_card: '',
				move_person_phone: '',
				move_out_address: '',
				move_in_address: '',
				move_in_location: '',
				relationship: '',
				move_reason: ''
			},
			rules: {
				applicant_name: [{
					required: true,
					message: '请输入申请人姓名',
					trigger: ['blur', 'change']
				}],
				applicant_gender: [{
					required: true,
					message: '请选择申请人性别',
					trigger: ['blur', 'change']
				}],
				applicant_birth_date: [{
					required: true,
					message: '请选择申请人出生日期',
					trigger: ['blur', 'change']
				}],
				move_person_name: [{
					required: true,
					message: '请输入迁移人姓名',
					trigger: ['blur', 'change']
				}],
				move_person_gender: [{
					required: true,
					message: '请选择迁移人性别',
					trigger: ['blur', 'change']
				}],
				move_person_birth_date: [{
					required: true,
					message: '请选择迁移人出生日期',
					trigger: ['blur', 'change']
				}],
				move_person_id_card: [{
					required: true,
					message: '请输入迁移人身份证号码',
					trigger: ['blur', 'change']
				}],
				move_person_phone: [{
					required: true,
					message: '请输入迁移人联系电话',
					trigger: ['blur', 'change']
				}],
				move_out_address: [{
					required: true,
					message: '请输入迁出地址',
					trigger: ['blur', 'change']
				}],
				move_in_address: [{
					required: true,
					message: '请输入迁入地址',
					trigger: ['blur', 'change']
				}],
				move_in_location: [{
					required: true,
					message: '请输入迁入地',
					trigger: ['blur', 'change']
				}],
				relationship: [{
					required: true,
					message: '请输入与申请人关系',
					trigger: ['blur', 'change']
				}],
				move_reason: [{
					required: true,
					message: '请输入迁移原因',
					trigger: ['blur', 'change']
				}]
			},
			showApplicantBirthCalendar: false,
			showMovePersonBirthCalendar: false,
			submitting: false
		}
	},
	methods: {
		// 申请人出生日期选择确认
		onApplicantBirthDateChange(e) {
			this.form.applicant_birth_date = e.result;
			this.showApplicantBirthCalendar = false;
		},

		// 迁移人出生日期选择确认
		onMovePersonBirthDateChange(e) {
			this.form.move_person_birth_date = e.result;
			this.showMovePersonBirthCalendar = false;
		},

		// 提交表单
		async submitForm() {
			try {
				// 表单验证
				const valid = await this.$refs.uForm.validate();
				if (!valid) {
					return;
				}

				// 显示加载提示
				uni.showLoading({
					title: '提交中...'
				});

				// 准备提交数据
				const submitData = { ...this.form };

				// 调用创建API
				await this.$api.householdMoveCreate(submitData);

				uni.hideLoading();

				uni.showToast({
						title: '提交成功',
						icon: 'success'
					});

					// 重置表单
					this.$refs.uForm.resetFields();

					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
			} catch (error) {
				console.log(error);
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	padding-bottom: 120rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin: 30rpx 0 20rpx 0;
	padding-left: 10rpx;
	border-left: 4rpx solid #007aff;
}

.submit-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 999;
}
</style>
